<template>
    <div class="vue3-modal">
        <h2>二、非兼容的变更</h2>
        <h3>1 全局 API</h3>
        <app-api title="1.1 全局 Vue API 更改为使用应用程序实例" />
        <api-tree-shaking title="1.2 全局和内部 API 已经被重构为支持 tree-shake，使用的时候需要手动引入" />
        <h3>2 模板指令</h3>
        <v-model-comp
            title="2.1 组件上 v-model 用法已更改，以替换 v-bind.sync"
            v-model="username"
            v-model:userage="userage"
        ></v-model-comp>
        <button @click="addUser">增加用户</button>
        <p ref="userBar"></p>
        <template-derective />
        <h3>3 组件</h3>
        <component-change />
        <h3>4 渲染函数</h3>
        <render-function />
        <h3>5 自定义元素</h3>
        <custom-element />
        <h3>6 其他小改变</h3>
        <else-change />
    </div>
</template>

<script>
import AppApi from './components/app-api/'
import ApiTreeShaking from './components/api-tree-shaking/'
import vModelComp from './components/v-model/'
import templateDerective from './components/template-derective/'
import renderFunction from './components/render-function/'
import customElement from './components/custom-element/'
import elseChange from './components/else-change/'

import { defineAsyncComponent, ref } from 'vue'
export default {
    components: {
        AppApi,
        ApiTreeShaking,
        vModelComp,
        templateDerective,
        renderFunction,
        componentChange: defineAsyncComponent(() => import('./components/component-change')),
        customElement,
        elseChange,
    },
    setup() {
        const username = ref('xu')
        const userage = ref(0)
        const userBar = ref(null)
        const addUser = () => {
            userBar.value.textContent = `您的姓名是：${username.value}, 年龄是：${userage.value}`
        }
        return {
            username, userage, userBar, addUser,
        }
    }
}
</script>

<style lang="scss" scoped>
</style>